声明: 本文由DataScience发表,未经允许不得转载。 转载请注明本文链接mlln.cn, 并在文后留言转载
.
本文代码运行环境:
- windows10
- jupyter notebook
- p5.js 0.6.1
概述
用于在屏幕上定位和移动物体的替代技术是改变屏幕坐标系。例如,您可以向右移动50个像素的形状,或者可以将坐标(0,0)的位置向右移动50个像素 - 屏幕上的可视结果是相同的。通过修改默认坐标系,我们可以创建不同的变换,包括平移,旋转和缩放。
(下面我们注册p5魔法, 以便于在jupyter notebook中使用p5.js, 如果你不用notebook, 请忽略这部分python代码)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| from IPython.core.magic import register_cell_magic from IPython.display import IFrame
TEMPLATE = """ <html> <head> <meta charset="utf-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.min.js"></script> <title>Notebook中显示P5.js页面</title> </head> <body> <a href="http://mlln.cn" target="_blank"><h5>p5.js效果展示: %(name)s</h5></a> <script> %(script)s </script> </body> </html> """
@register_cell_magic def p5(line, cell): file_id, kws = line.split(' ')[0], line.split(' ')[1:] kwargs = {} for kw in kws: k, v = kw.split('=') kwargs[k] = v filename = f"p5js-html/p5-04-{file_id}.html" with open(filename, "w", encoding='utf8') as fp: fp.write(TEMPLATE % {"script": cell, "name": filename}) if 'height' not in kwargs: kwargs['height'] = '200px' return IFrame(filename, width="100%", **kwargs)
del p5
|
平移
实现这个效果: translate()函数将屏幕的(0,0)坐标设置为鼠标位置(mouseX和mouseY)。每次draw()函数执行时,ellipse()都会在新的坐标系中绘制。看下面的代码, 每次都会调用ellipse(0, 0, 30, 30), 也就是都在(0, 0)的位置绘制矩形, 但是因为坐标系的变换, (0, 0)位置总是在鼠标的位置, 所以下面代码意义就是在鼠标所在位置绘制圆形。
1 2 3 4 5 6 7 8 9 10 11 12
| %%p5 translate height=250
function setup() { createCanvas(220, 220); background(204); }
function draw() { translate(mouseX, mouseY); ellipse(0, 0, 20, 20); }
|
输出:
1 2 3 4 5 6 7 8 9 10 11
| %%p5 folow-mouse height=250
function setup() { createCanvas(220, 220); background(204); }
function draw() { ellipse(mouseX, mouseY, 20, 20); }
|
输出:
旋转坐标系
rotate()函数旋转坐标系。它有一个参数,即旋转的角度(弧度)。它始终相对于坐标原点(0,0)旋转,称为围绕原点旋转。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| %%p5 rotate height=250
function setup() { createCanvas(220, 220); background(204); }
let r= 0; function draw() { rotate(r) r += PI/4 * 0.01 ellipse(100, 100, 20, 20); if (r > PI/4){ r = - PI / 4 background(204); } }
|
输出:
缩放
scale()函数拉伸画布上的坐标。由于坐标随着比例的变化而扩展或收缩,因此绘制到画布的所有内容的尺寸都会增大或减小。比例写为十进制百分比。因此,参数1.5 to scale()为150%,3为300%。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| %%p5 scale height=250
function setup() { createCanvas(220, 220); background(204); }
let r= 0.1; function draw() { scale(r) // 每次迭代增加0.01 r += 0.01 ellipse(100, 100, 20, 20); // 如果超过一定值, 就重置r if (r>2){ background(204); r=0.1 } }
|
输出:
Push and Pop
要隔离转换的影响,使它们不影响以后的图形,请使用push()和pop()函数。当push()运行时,它会保存当前坐标系的副本,然后在pop()之后恢复该系统。当一个形状需要变换但另一个变形不需要变换时,这很有用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| %%p5 push-pop height=250
function setup() { createCanvas(220, 220); background(204); }
let r= 0.1; function draw() { push() scale(r) // 每次迭代增加0.01 r += 0.01 ellipse(100, 100, 20, 20); // 如果超过一定值, 就重置r if (r>2){ background(204); r=0.1 } pop() // 保证不缩放矩形 rect(220-r*80, r*80, 10, 10) }
|
输出:
注意
本文由jupyter notebook转换而来, 您可以在这里下载notebook
统计咨询请加QQ 2726725926, 微信 mllncn, SPSS统计咨询是收费的
微博上@mlln-cn可以向我免费题问
请记住我的网址: mlln.cn 或者 jupyter.cn